/*
@功能：商品页js
@作者：diamondwang
@时间：2013年11月13日
*/
$(function(){
	//商品缩略图左右移动效果
	//点击后退
	$("#backward").click(function(){
		var left = parseInt($(".smallpic_wrap ul").css("left")); //获取ul水平方向偏移量
		var offset = left + 62;
		if (offset <= 0){
			$(".smallpic_wrap ul").stop(true,false).animate({left:offset},"slow",'',function(){
				//动画完成之后，判断是否到了左边缘
				if ( parseInt($(".smallpic_wrap ul").css("left")) >= 0 ){
					$("#backward").removeClass("on").addClass("off");
				}
			});
			//开启右边的按钮
			$("#forward").removeClass("off").addClass("on");			
		}
		
		$(this).blur(); //去除ie 虚边框
	});

	//点击前进
	$("#forward").click(function(){
		var left = parseInt($(".smallpic_wrap ul").css("left")); //获取ul水平方向偏移量
		var len = $(".smallpic_wrap li").size() * 62; //获取图片的整体宽度(图片数 * 图片宽度)558
		var offset = left - 62;
		if (offset >= -(len - 62*5)){
			$(".smallpic_wrap ul").stop(true,false).animate({left:offset},"slow",'',function(){
				//判断是否到了右边缘
				if ( parseInt($(".smallpic_wrap ul").css("left")) <= -(len - 62*5) ){
					$("#forward").removeClass("on").addClass("off");
				}
			});
			//开启左边的按钮
			$("#backward").addClass("on").removeClass("off");
			
		}
		
		$(this).blur(); //去除ie 虚边框
	});

	//选择货品，如颜色、版本等
	$(".product a").click(function(){
		$(this).addClass("selected").siblings().removeClass("selected");
		$(this).find("input").attr({checked:"checked"});
		//去除虚边框
		$(this).blur();
	});


	//购买数量
	//减少
	$("#reduce_num").click(function(){
		if (parseInt($(".amount").val()) <= 1){
			alert("商品数量最少为1");
		} else{
			$(".amount").val(parseInt($(".amount").val()) - 1);
		}
	});

	//增加
	$("#add_num").click(function(){
		$(".amount").val(parseInt($(".amount").val()) + 1);
	});

	//直接输入
	$(".amount").blur(function(){
		if (parseInt($(".amount").val()) < 1){
			alert("商品数量最少为1");
			$(this).val(1);
		}
	});

	//商品详情效果
	$(".detail_hd li").click(function(){
		$(".detail_div").hide().eq($(this).index()).show();
		$(this).addClass("on").siblings().removeClass("on");
	});




	//接口，商品详情接口

	//获取地址栏的参数
	function getQueryVariable(variable)
	{
				 var query = window.location.search.substring(1);
				 var vars = query.split("&");
				 for (var i=0;i<vars.length;i++) {
								 var pair = vars[i].split("=");
								 if(pair[0] == variable){return pair[1];}
				 }
				 return(false);
	}

	let goodsId = getQueryVariable("id")
	//请求地址，用于渲染页面
	$.get('http://kg.zhaodashen.cn/v1/goods/detail.jsp',{goodsId},res=>{
		console.log(res);

		let html=''
		// if(res.meta.state == 200  && $(res.data.imgs).length !== 0){
			let tmp = []
			let imgshtml=''
			if (res.data.imgs && res.data.imgs.length>0)
			{
				//将地址放在tmp数组中
				$.each(res.data.imgs, (index,item) => {
						tmp.push( "http://tmp00001.zhaodashen.cn/" + item.img_url )
				})
				//遍历，拼接显示的图片
				$.each(tmp,(index,item)=>{
					if(index != 0){
						// console.log(index)
						imgshtml += `<li>
						<a href="javascript:void(0);" 
						rel="{gallery: 'gal1', smallimage: 'imgs/preview_m3.jpg',largeimage: 'imgs/preview_l3.jpg'}">  
							<img src="${item}"></a>
					</li>`
					}else{
						imgshtml += `
						<li class="cur">
							<a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: 'imgs/preview_m1.jpg',largeimage: 'imgs/preview_l1.jpg'}"><img src="${item}"></a>
						</li>
						`
					}
					
				})

				// console.log(imgshtml)
			}
		//判断如果请求地址成功，就使用数据库数据渲染页面
		if(res.meta.state == 200 )
		{
			html=`
			<h3><strong>${res.data.goods_name}</strong></h3>
			
			<!-- 图片预览区域 start -->
			<div class="preview fl">
				<div class="midpic"style="overflow:hidden">
					<a href="imgs/preview_l1.jpg" class="jqzoom" rel="gal1">   <!-- 第一幅图片的大图 class 和 rel属性不能更改 -->
						<img src="http://tmp00001.zhaodashen.cn/${(res.data.imgs[0].img_url)}" alt="" />               <!-- 第一幅图片的中图 -->
					</a>
				</div>

				<!--使用说明：此处的预览图效果有三种类型的图片，大图，中图，和小图，取得图片之后，分配到模板的时候，把第一幅图片分配到 上面的midpic 中，其中大图分配到 a 标签的href属性，中图分配到 img 的src上。 下面的smallpic 则表示小图区域，格式固定，在 a 标签的 rel属性中，分别指定了中图（smallimage）和大图（largeimage），img标签则显示小图，按此格式循环生成即可，但在第一个li上，要加上cur类，同时在第一个li 的a标签中，添加类 zoomThumbActive  -->

				<div class="smallpic">
					<a href="javascript:;" id="backward" class="off"></a>
					<a href="javascript:;" id="forward" class="on"></a>
					<div class="smallpic_wrap">
						<ul>
							
							${imgshtml}
							</ul>
					</div>
					
				</div>
			</div>
			<!-- 图片预览区域 end -->

			<!-- 商品基本信息区域 start -->
			<div class="goodsinfo fl ml10">
				<ul>
					<li><span>商品编号： </span>${res.data.goods_sn}</li>
					<li class="market_price"><span>定价：</span><em>￥${res.data.market_price}</em></li>
					<li class="shop_price"><span>本店价：</span> <strong>￥${res.data.shop_price}</strong> <a href="">(降价通知)</a></li>
					<li><span>上架时间：</span>${res.data.add_time}</li>
					<li class="star"><span>商品评分：</span> <strong></strong><a href="">(已有21人评价)</a></li> <!-- 此处的星级切换css即可 默认为5星 star4 表示4星 star3 表示3星 star2表示2星 star1表示1星 -->
				</ul>
				<form action="" method="post" class="choose">
					<ul>
						<li class="product">
							<dl>
								<dt>颜色：</dt>
								<dd>
									<a class="selected" href="javascript:;">黑色 <input type="radio" name="color" value="黑色" checked="checked" /></a>
									<a href="javascript:;">白色 <input type="radio" name="color" value="白色" /></a>
									<a href="javascript:;">蓝色 <input type="radio" name="color" value="蓝色" /></a>
									<input type="hidden" name="" value="" />
								</dd>
							</dl>
						</li>

						<li class="product">
							<dl>
								<dt>版本：</dt>
								<dd>
									<a href="javascript:;">i3 4G内存版 <input type="radio" name="ver" value="" /></a>
									<a href="javascript:;">i5 4G内存版 <input type="radio" name="ver" value=""  /></a>
									<a class="selected" href="javascript:;">i5 8G内存版<input type="radio" name="ver" value="" checked="checked" /></a>
									<a href="javascript:;">SSD超极本 <input type="radio" name="ver" value="" /></a>
									<input type="hidden" name="" value="" />
								</dd>
							</dl>
						</li>
						
						<li>
							<dl>
								<dt>购买数量：</dt>
								<dd>
									<a href="javascript:;" id="reduce_num"></a>
									<input type="text" name="amount" value="1" class="amount"/>
									<a href="javascript:;" id="add_num"></a>
								</dd>
							</dl>
						</li>

						<li>
							<dl>
								<dt>&nbsp;</dt>
								<dd>
									<input type="button" class="add_btn" />
								</dd>
							</dl>
						</li>

					</ul>
				</form>
			</div> `
		}
		else{
			alert(res.meta.msg)
		}
		$('.summary').append(html)
	},'json')

	//加入购物车点击事件，使用事件代理
	let buyNum = $('.amount').val()
	let	token = localStorage.getItem('token') || '861a00333edae4e5ccbaa69718ac2d552906'
	$('.summary').on('click','.add_btn',function(){
		//请求地址
		$.post('http://kg.zhaodashen.cn/v1/cart/create.jsp',{goodsId,buyNum,token},res=>{
			if(res.meta.state == 201){
				alert(res.meta.msg)
				let a = confirm('添加成功，去购物车结算吗？')
				if(a){
					location.href='./flow1.html'
				}else{
					return	
				}
			}
		},'json')

	})

	let value = $('.amount').val()
	console.log(value)
	//设置加+，减-，正则判断value
	$('.summary').on('click','#add_num',function(){
		 // this .add +  JS标签对象

    // 1-获取到前一个兄弟数字，
    var num = $(this).prev().val()
    console.log(num)  // 页面获取的都是字符串
    // 2-增1 ，
    num = parseInt(num) + 1 // 举例：当num结果是a1  就会变成 NaN+1 结果还是NaN
    if (isNaN(num)) num = 1 
    // 3-再放进去
    $(this).prev().val(num)
	})
	$('.summary').on('click','#reduce_num',function(){
		// this -标签  JS标签对象

    // 1-获取到后一个兄弟数字，
    var num = $(this).next().val() 
    // 2-减1 ，
    num = parseInt(num) - 1    // 2  1  0
    if (isNaN(num) || num < 1) num = 1 
    // 3-再放进去
    $(this).next().val(num)

	})

	// input框键松开
	// 步骤1：给商品数量input框 增加 键盘松开事件
	// 步骤2：在键盘松开事件中 -> 1-获取数据，2-正则过滤非数字替换掉，3-小于1重置为1，4-再放进去
	$('.summary').on('keyup', '.amount', function(){
		// this 代表 .num input框  JS标签对象

		// 1-获取数据，
		var num = $(this).val()
		// 2-正则过滤非数字替换掉，
		num = num.replace(/[^0-9]/g, '')
		// console.log(num)
		// 3-小于1重置为1，
		if (isNaN(num) || num < 1) num = 1
		// 4-再放进去
		$(this).val(num)
	})

});